<template>
  <el-container>
    <el-aside class="aside-left">
      <el-select class="property" v-model="region" placeholder="请选择房产信息">
        <el-option v-for="regionSelect in regionSelects" :label="regionSelect.label" :value="regionSelect.value" :key="regionSelect.value">

        </el-option>
      </el-select>
      <div  class="status">
          <div class="status-left"><i class="el-icon-error"></i>已登记</div>
          <div class="status-right"><i class="el-icon-success"></i>未登记</div>
      </div>
      <el-row  class="status">
        <el-col :span="12" class="status-left"></el-col>
        <el-col :span="12" class="status-right"></el-col>
      </el-row>
      <Tree class="tree" :treeData="treeData" @emitTreeData="emitTreeData"/>
    </el-aside>
    <el-main> 
      <Information :informationData="informationData"/>
    </el-main>
  </el-container>
</template>

<script>
import Tree from '@/components/tree'
import Information from './information'
let oldInformationData = [
{'roomCode':'hr001010101','roomName':'华润1号楼1单元101室','roomApartment':1,'roomRenovation':2,'roomOrientation':2,'roomFloor':6,'roomArea':96,'roomArea_1':85,'roomLicensePlate':'津xh32212','roomState':1,'propertyType':1,'roomType':1},
{'roomCode':'hr001010102','roomName':'华润1号楼1单元102室','roomApartment':2,'roomRenovation':1,'roomOrientation':1,'roomFloor':6,'roomArea':96,'roomArea_1':85,'roomLicensePlate':'津hg32332','roomState':1,'propertyType':1,'roomType':1}, 
{'roomCode':'hr001010201','roomName':'华润1号楼1单元201室','roomApartment':3,'roomRenovation':3,'roomOrientation':1,'roomFloor':6,'roomArea':96,'roomArea_1':85,'roomLicensePlate':'津hg32332','roomState':1,'propertyType':1,'roomType':1}, 
{'roomCode':'hr001010202','roomName':'华润1号楼1单元202室','roomApartment':2,'roomRenovation':1,'roomOrientation':1,'roomFloor':6,'roomArea':96,'roomArea_1':85,'roomLicensePlate':'津hg32332','roomState':1,'propertyType':1,'roomType':1}, 
{'roomCode':'hr001010301','roomName':'华润1号楼1单元301室','roomApartment':2,'roomRenovation':1,'roomOrientation':1,'roomFloor':6,'roomArea':96,'roomArea_1':85,'roomLicensePlate':'津hg32332','roomState':1,'propertyType':1,'roomType':1}, 
{'roomCode':'hr001010302','roomName':'华润1号楼1单元302室','roomApartment':2,'roomRenovation':1,'roomOrientation':1,'roomFloor':6,'roomArea':96,'roomArea_1':85,'roomLicensePlate':'津hg32332','roomState':1,'propertyType':1,'roomType':1}, 
{'roomCode':'hr001010401','roomName':'华润1号楼1单元401室','roomApartment':2,'roomRenovation':1,'roomOrientation':1,'roomFloor':6,'roomArea':96,'roomArea_1':85,'roomLicensePlate':'津hg32332','roomState':1,'propertyType':1,'roomType':1}, 
{'roomCode':'hr001010402','roomName':'华润1号楼1单元402室','roomApartment':2,'roomRenovation':1,'roomOrientation':1,'roomFloor':6,'roomArea':96,'roomArea_1':85,'roomLicensePlate':'津hg32332','roomState':1,'propertyType':1,'roomType':1}, 
]
let oldTreeData = [{
          label: '华润橡树湾',
          key: '1',
          children: [{
            label: '1号楼',
            key: '2',
            children: [{
              label: '1单元',
              key: '3',
              children: [{
                label: '101',
                key: '4',
                value: 'hr001010101'
              },{
                label: '102',
                key: '4',
                value: 'hr001010102'
              },{
                label: '201',
                key: '4',
                value: 'hr001010201'
              },{
                label: '202',
                key: '4',
                value: 'hr001010202'
              },{
                label: '301',
                key: '4',
                value: 'hr001010301'
              },{
                label: '302',
                key: '4',
                value: 'hr001010302'
              },{
                label: '401',
                key: '4',
                value: 'hr001010401'
              },{
                label: '402',
                key: '4',
                value: 'hr001010402'
              },{
                label: '501',
                key: '4',
                value: 'hr001010501'
              },{
                label: '502',
                key: '4',
                value: 'hr001010502'
              },{
                label: '601',
                key: '4',
                value: 'hr001010601'
              },{
                label: '602',
                key: '4',
                value: 'hr001010602'
              }]
            },{
              label: '2单元',
              key: '3',
              children: [{
                label: '101',
                key: '4',
                value: 'hr001020101'
              },{
                label: '102',
                key: '4',
                value: 'hr001020102'
              },{
                label: '201',
                key: '4',
                value: 'hr001020201'
              },{
                label: '202',
                key: '4',
              },{
                label: '301',
                key: '4',
              },{
                label: '302',
                key: '4',
              },{
                label: '401',
                key: '4',
              },{
                label: '402',
                key: '4',
              },{
                label: '501',
                key: '4',
              },{
                label: '502',
                key: '4',
              },{
                label: '601',
                key: '4',
              },{
                label: '602',
                key: '4',
              }]
            },{
              label: '3单元',
              key: '3',
              children: [{
                label: '101',
                key: '4',
              },{
                label: '102',
                key: '4',
              },{
                label: '201',
                key: '4',
              },{
                label: '202',
                key: '4',
              },{
                label: '301',
                key: '4',
              },{
                label: '302',
                key: '4',
              },{
                label: '401',
                key: '4',
              },{
                label: '402',
                key: '4',
              },{
                label: '501',
                key: '4',
              },{
                label: '502',
                key: '4',
              },{
                label: '601',
                key: '4',
              },{
                label: '602',
                key: '4',
              }]
            }]
          },{
            label: '2号楼',
            key: '2',
            children: [{
              label: '1单元',
              key: '3',
              children: [{
                label: '101',
                key: '4',
              },{
                label: '102',
                key: '4',
              },{
                label: '201',
                key: '4',
              },{
                label: '202',
                key: '4',
              },{
                label: '301',
                key: '4',
              },{
                label: '302',
                key: '4',
              },{
                label: '401',
                key: '4',
              },{
                label: '402',
                key: '4',
              },{
                label: '501',
                key: '4',
              },{
                label: '502',
                key: '4',
              },{
                label: '601',
                key: '4',
              },{
                label: '602',
                key: '4',
              }]
            },{
              label: '2单元',
              key: '3',
              children: [{
                label: '101',
                key: '4',
              },{
                label: '102',
                key: '4',
              },{
                label: '201',
                key: '4',
              },{
                label: '202',
                key: '4',
              },{
                label: '301',
                key: '4',
              },{
                label: '302',
                key: '4',
              },{
                label: '401',
                key: '4',
              },{
                label: '402',
                key: '4',
              },{
                label: '501',
                key: '4',
              },{
                label: '502',
                key: '4',
              },{
                label: '601',
                key: '4',
              },{
                label: '602',
                key: '4',
              }]
            },{
              label: '3单元',
              key: '3',
              children: [{
                label: '101',
                key: '4',
              },{
                label: '102',
                key: '4',
              },{
                label: '201',
                key: '4',
              },{
                label: '202',
                key: '4',
              },{
                label: '301',
                key: '4',
              },{
                label: '302',
                key: '4',
              },{
                label: '401',
                key: '4',
              },{
                label: '402',
                key: '4',
              },{
                label: '501',
                key: '4',
              },{
                label: '502',
                key: '4',
              },{
                label: '601',
                key: '4',
              },{
                label: '602',
                key: '4',
              }]
            }]
          },{
            label: '3号楼',
            key: '2',
            children: [{
              label: '1单元',
              key: '3',
              children: [{
                label: '101',
                key: '4',
              },{
                label: '102',
                key: '4',
              },{
                label: '201',
                key: '4',
              },{
                label: '202',
                key: '4',
              },{
                label: '301',
                key: '4',
              },{
                label: '302',
                key: '4',
              },{
                label: '401',
                key: '4',
              },{
                label: '402',
                key: '4',
              },{
                label: '501',
                key: '4',
              },{
                label: '502',
                key: '4',
              },{
                label: '601',
                key: '4',
              },{
                label: '602',
                key: '4',
              }]
            },{
              label: '2单元',
              key: '3',
              children: [{
                label: '101',
                key: '4',
              },{
                label: '102',
                key: '4',
              },{
                label: '201',
                key: '4',
              },{
                label: '202',
                key: '4',
              },{
                label: '301',
                key: '4',
              },{
                label: '302',
                key: '4',
              },{
                label: '401',
                key: '4',
              },{
                label: '402',
                key: '4',
              },{
                label: '501',
                key: '4',
              },{
                label: '502',
                key: '4',
              },{
                label: '601',
                key: '4',
              },{
                label: '602',
                key: '4',
              }]
            },{
              label: '3单元',
              key: '3',
              children: [{
                label: '101',
                key: '4',
              },{
                label: '102',
                key: '4',
              },{
                label: '201',
                key: '4',
              },{
                label: '202',
                key: '4',
              },{
                label: '301',
                key: '4',
              },{
                label: '302',
                key: '4',
              },{
                label: '401',
                key: '4',
              },{
                label: '402',
                key: '4',
              },{
                label: '501',
                key: '4',
              },{
                label: '502',
                key: '4',
              },{
                label: '601',
                key: '4',
              },{
                label: '602',
                key: '4',
              }]
            }]
          }]
        }, {
          label: '天欣锦园',
          key: '1',
          children: [{
            label: '二级 2-1',
            children: [{
              label: '三级 2-1-1'
            }]
          }, {
            label: '二级 2-2',
            children: [{
              label: '三级 2-2-1'
            }]
          }]
        }, {
          label: '华富家园',
          children: [{
            label: '二级 3-1',
            children: [{
              label: '三级 3-1-1'
            }]
          }, {
            label: '二级 3-2',
            children: [{
              label: '三级 3-2-1'
            }]
          }]
        }, {
          label: '华轩家园',
          children: [{
            label: '二级 3-1',
            children: [{
              label: '三级 3-1-1'
            }]
          }, {
            label: '二级 3-2',
            children: [{
              label: '三级 3-2-1'
            }]
          }]
        }, {
          label: '万科新里程花园',
          children: [{
            label: '二级 3-1',
            children: [{
              label: '三级 3-1-1'
            }]
          }, {
            label: '二级 3-2',
            children: [{
              label: '三级 3-2-1'
            }]
          }]
        }];
export default {
  data() {
    return {
      regionSelects: [
        { label: '华润橡树湾', value: '华润橡树湾' },
        { label: '天欣锦园', value: '天欣锦园' },
        { label: '华富家园', value: '华富家园' },
        { label: '华轩家园', value: '华轩家园' },
        { label: '万科新里程花园', value: '万科新里程花园' }
      ],
      region: '',
      informationData: {},
      treeData: oldTreeData,
    }
  },
  components: {
    Tree,
    Information
  },
  mounted:function(){
    //alert("3");
  },
  watch: {
    region(newName, oldName) {
      oldTreeData.forEach((item,index)=>{ 
        if(oldTreeData[index].label == newName){
          this.treeData=[oldTreeData[index]];
        }
      })
    }
  },
  methods: {
    emitTreeData:function(data){
      oldInformationData.forEach((item,index)=>{
        if(oldInformationData[index].roomCode == data.value){
          this.informationData = oldInformationData[index];
        }
      })  
    }
  }
}
</script>
<style scoped>
  .status{
    font-size: 14px; 
    margin-left: 20px;
  }
  .status i{
    margin: 5px;
  }
  .status-left{
    text-align: right;
    float: left;
  }
  .status-left i{
    color: red;
  }
  .status-right{
    text-align: left;
    float: left;
  }
  .status-right i{
    color: green;
  }
  .tree{
    border-top: 1px dotted #eee;
    margin-top: 10px;
    margin: 10px;
  }
  .property{
    margin: 20px 0px 10px 20px;
  }
  .el-container{
    height: calc(100vh - 50px);
  }
  .aside-left{
    width: 240px !important;
    height: calc(100vh - 50px);
    border-right: 1px solid #eeeeee;
  }
</style>
